<template>
  <div class="detail">
    <h1
      style="
        height: 60px;
        color: #00ffff;
        line-height: 60px;
        margin: 0;
        font-size: 20px;
        text-align: center;
      "
    >
      文章详情
    </h1>

    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      style="text-align: left"
    >
      <el-form-item label="文章id:">
        {{ article_id }}
      </el-form-item>
      <el-form-item label="浏览次数:">
        {{ form.view_count }}
      </el-form-item>

      <el-form-item label="文章标题:">
        {{ form.title }}
      </el-form-item>

      <el-form-item label="文章作者:">
        {{ form.author }}
      </el-form-item>

      <el-form-item label="创作时间:">
        {{ form.created }}
      </el-form-item>

      <el-form-item label="更新时间:">
        {{ form.updated_at }}
      </el-form-item>

      <el-form-item label="文章标题:">
        {{ form.title }}
      </el-form-item>

      <el-form-item label="文章描述:">
        {{ form.description }}
      </el-form-item>

      <el-form-item label="文章图片:">
        <img :src="form.poster" width="80" />
      </el-form-item>

      <el-form-item label="文章内容:">
        {{ form.detail }}
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  // created(){
  // 	console.log(this.$route.params)
  // }
  props: ["article_id"],
  created() {
    axios({
      url: `http://120.27.209.174:1010/api/v1/posts/${this.article_id}`,
    }).then((res) => {
      console.log(res.data);
      this.form = res.data;
    });
  },
  data() {
    return {
      form: {},
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style scoped>
.datail {
  text-align: left !important;
}

.el-form-item {
  margin: 0;
}
</style>
